.artalk-sidebar {
  @width: 430px;
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  width: @width;
  height: 100%;
  background: @color-bg;
  transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  transform: translate(@width, 0px);

  @media only screen and (max-width: @width) {
    & {
      width: 100%;
    }
  }

  .artalk-sidebar-inner {
    position: relative;

    .artalk-sidebar-title {
      font-size: 23px;
      padding: 15px 35px 10px 20px;
    }

    .artalk-sidebar-close {
      position: absolute;
      display: flex;
      right: 10px;
      top: 10px;
      width: 40px;
      height: 40px;
      align-items: center;
      place-content: center;
      cursor: pointer;
      user-select: none;

      &:hover {
        background: rgba(232, 17, 35, 0.9);
        svg {
          fill: #fff;
        }
      }

      & svg {
        fill: @color-font;
      }
    }
  }

  .artalk-sidebar-actions {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid @color-border;

    .artalk-action-item {
      display: flex;
      flex-grow: 1;
      scroll-snap-align: start;
      place-content: center;
      line-height: 40px;
      cursor: pointer;
      user-select: none;

      &:hover {
        background: @color-bg-grey;
      }

      &.artalk-active {
        color: @color-main;
        font-weight: bold;
      }
    }
  }

  .artalk-sidebar-content {
    position: relative;
    overflow-y: auto;
    height: calc(100vh - 102px);

    .artalk-sidebar-no-content {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      font-size: 2em;
      text-align: center;
      margin-top: 20vh;
      color: @color-meta;
    }
  }
}
